import React, { useState } from 'react';
import { Card, Form, Switch, Select, Slider, Radio, Button, message, Typography, Divider } from 'antd';
import { SaveOutlined, ReloadOutlined } from '@ant-design/icons';
import type { RadioChangeEvent } from 'antd';

const { Title, Paragraph } = Typography;
const { Option } = Select;

interface SettingsState {
    theme: string;
    colorPrimary: string;
    compactMode: boolean;
    notificationEnabled: boolean;
    notificationSound: boolean;
    language: string;
    fontSize: number;
}

const Settings: React.FC = () => {
    // 默认设置
    const defaultSettings: SettingsState = {
        theme: 'light',
        colorPrimary: '#1890ff',
        compactMode: false,
        notificationEnabled: true,
        notificationSound: true,
        language: 'zh_CN',
        fontSize: 14,
    };

    const [settings, setSettings] = useState<SettingsState>(defaultSettings);

    // 主题选项
    const themeOptions = [
        { label: '浅色', value: 'light' },
        { label: '深色', value: 'dark' },
    ];

    // 颜色选项
    const colorOptions = [
        { label: '蓝色 (默认)', value: '#1890ff' },
        { label: '绿色', value: '#52c41a' },
        { label: '紫色', value: '#722ed1' },
        { label: '红色', value: '#f5222d' },
        { label: '橙色', value: '#fa8c16' },
    ];

    // 语言选项
    const languageOptions = [
        { label: '简体中文', value: 'zh_CN' },
        { label: '繁体中文', value: 'zh_TW' },
        { label: '英文', value: 'en_US' },
        { label: '日文', value: 'ja_JP' },
    ];

    // 处理主题切换
    const handleThemeChange = (e: RadioChangeEvent) => {
        setSettings({
            ...settings,
            theme: e.target.value,
        });
    };

    // 处理表单提交
    const handleSubmit = (values: any) => {
        setSettings({
            ...settings,
            ...values,
        });
        message.success('设置已保存');
    };

    // 重置设置
    const handleReset = () => {
        setSettings(defaultSettings);
        message.info('设置已重置为默认值');
    };

    return (
        <div>
            <Title level={2}>系统设置</Title>
            <Paragraph>自定义系统外观和行为</Paragraph>
            <Divider />

            <Card>
                <Form
                    layout="vertical"
                    initialValues={settings}
                    onFinish={handleSubmit}
                >
                    <Title level={4}>外观设置</Title>
                    <Form.Item label="主题模式" name="theme">
                        <Radio.Group options={themeOptions} onChange={handleThemeChange} />
                    </Form.Item>

                    <Form.Item label="主题颜色" name="colorPrimary">
                        <Select>
                            {colorOptions.map(option => (
                                <Option key={option.value} value={option.value}>
                                    <div style={{ display: 'flex', alignItems: 'center' }}>
                                        <div
                                            style={{
                                                width: 16,
                                                height: 16,
                                                background: option.value,
                                                marginRight: 8,
                                                borderRadius: 4,
                                            }}
                                        />
                                        {option.label}
                                    </div>
                                </Option>
                            ))}
                        </Select>
                    </Form.Item>

                    <Form.Item label="紧凑模式" name="compactMode" valuePropName="checked">
                        <Switch />
                    </Form.Item>

                    <Form.Item label="字体大小" name="fontSize">
                        <Slider
                            min={12}
                            max={18}
                            marks={{
                                12: '12px',
                                14: '14px',
                                16: '16px',
                                18: '18px',
                            }}
                        />
                    </Form.Item>

                    <Divider />
                    <Title level={4}>通知设置</Title>

                    <Form.Item label="启用通知" name="notificationEnabled" valuePropName="checked">
                        <Switch />
                    </Form.Item>

                    <Form.Item label="通知声音" name="notificationSound" valuePropName="checked">
                        <Switch />
                    </Form.Item>

                    <Divider />
                    <Title level={4}>语言设置</Title>

                    <Form.Item label="系统语言" name="language">
                        <Select>
                            {languageOptions.map(option => (
                                <Option key={option.value} value={option.value}>{option.label}</Option>
                            ))}
                        </Select>
                    </Form.Item>

                    <Form.Item>
                        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                            <Button
                                type="primary"
                                htmlType="submit"
                                icon={<SaveOutlined />}
                            >
                                保存设置
                            </Button>
                            <Button
                                onClick={handleReset}
                                icon={<ReloadOutlined />}
                            >
                                恢复默认
                            </Button>
                        </div>
                    </Form.Item>
                </Form>
            </Card>
        </div>
    );
};

export default Settings; 